<template>
  <div class="order-list van-multi-ellipsis--l2 ">
    <div class="card-item" v-for="(order, i) in orderList" :key="i">
      <van-cell class="card-header" :title="`订单ID：${order.id}`" :label="`订单时间：${order.orderTime}`">
        <template #default>
          <span>{{ orderStatus(order.status) }}</span>
          <span v-if="order.status !== 5" @click="onClickOrderCancel(order.id)">| 取消订单</span>
        </template>
      </van-cell>

      <van-row >
        <van-col span="6">
          <van-image :src="order.img"></van-image>
        </van-col>

        <van-col span="18">
          <van-cell :title="order.title" :label="order.detail" class="van-ellipsis"></van-cell>

          <van-row style="padding-left: 20px;text-align: right;" type="flex" justify="space-between">
            <van-col span="5">{{ order.price}}</van-col>

          </van-row>
        </van-col>
      </van-row>

      <div class="buttons">
        <van-button style="margin-right: 20px;height: 40px;width: 100px" round color="#070100" plain>修改地址
        </van-button>
        <van-button round color="#d24747" style="height: 40px;width: 100px" plain>继续付款</van-button>
      </div>
      <nut-cell isLink title="查看详情" :showIcon="true" @click.native="show= true">
      </nut-cell>
      <nut-popup :style="{ padding: '30px 50px' }" v-model="show" position="top">

        <nut-steps :current="current2" status="error" :source="titles">
          <nut-step :key="index" v-for="(item,index) in titles" :title="item"
                    :content="content[index]"></nut-step>
        </nut-steps>

      </nut-popup>
    </div>
  </div>
</template>

<script>
import {getOrderListAPI, cancleOrderByIdAPI} from '@/api/order.js';
import {getUserLocal} from "../../utils/auth";



export default {
  components: [],

  data() {
    return {
      content: ["成功创建订单", "已经完成支付", "正在准备发货"],
      current: 3,
      titles: [],
      current2: 0,
      show: false,
      orderList: [],
    };
  },

  //生命周期钩子函数

  created() {
    this.getOrderList();
  },
  mounted() {
    setTimeout(() => {
      this.titles = ["已创建", "已支付", "待发货"];
      this.current2 = 3;
    }, 2000);
  },
  methods: {
    //获取订单列表
    next() {
      this.current = this.current + 1;
    },
    showPopup() {
      this.show = true
    },
    getOrderList() {
      let id = getUserLocal().id;
      getOrderListAPI(id).then(result => {
        this.orderList = result.data;
        console.log(this.orderList)
          })
    },


    // 触发导航到订单详情（此时该路由功能还没有实现）

    onClick2OrderDetail(id) {
      this.$router.push({
        name: 'orderDetail',
        params: {
          id
        }
      });
    },

    // 触发取消订单

    onClickOrderCancel(id) {
      cancleOrderByIdAPI(id).then(() => {
        this.$toast.text('取消成功');
      });
    },

    //计算一个订单的总金额

    orderAmount(order) {
      let amount = 0;

      order.detailList.forEach(item => {
        amount += item.count * item.price;
      });

      return amount.toFixed(2);
    },

    //订单状态格式转换

    orderStatus(order) {
      let status = '未知';

      switch (order) {
        case 1:
          status = '未支付';

          break;

        case 2:
          status = '未发货';

          break;

        case 3:
          status = '运输中';

          break;
        case 4:
          status = '已签收';

          break;
        case 5:
          status = '已取消';

          break;
      }

      return status;
    }
  }
};
</script>

<style lang="less" scoped>
.order-list {
  background-color: #f3f3f3;
}

.card-item {
  margin: 10px;

  padding: 10px;

  background-color: white;

  border-radius: 10px;

  font-size: 16px;
}

.card-header {
  padding: 5px 5px;

  font-size: 16px;

  font-weight: bolder;

  display: flex;

  justify-content: space-between;

  ::v-deep .van-cell__value {
    color: #070100;
  }
}

.amount {
  padding: 5px 5px;

  text-align: right;

  color: #6b6969;

  font-weight: bold;

  background-color: rgb(216, 219, 217);
}

.buttons {
  padding-top: 20px;
  text-align: right;
}
</style>
